<template>
  <div class="userDetail">
    <div class="userDetailCard">
      <el-card :body-style="{ padding: '0px' }">
        <div class="topDetail">
          <div class="topItem" style="border-right: 2px solid #cbcbcb">
            <el-link :underline="false" type="success">访问量</el-link><br/>
            {{detail.traffic}}
          </div>
          <div class="topItem">
            <el-link :underline="false"  type="warning">文章数</el-link><br/>
            {{detail.blogCount}}
          </div>
          <div class="topItem" style="border-left: 2px solid #cbcbcb">
            <el-button>主页</el-button>
          </div>
        </div>
        <div class="midDetail">
          <p>{{detail.detail}}</p>
          <h3>相册</h3>
        </div>
        <div class="bottonImgs">
          <el-image v-for="(item, id) in srcList" :key="id"
              style="width: 65px; height: 65px; margin: 5px 5px"
              :src="item"
              :preview-src-list="srcList">
          </el-image>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: "userDetail",
  props: {
    detail: {
      //points starts
      type: Object,
      default (){
        return {}
      }
    }
  },
  data() {
    return {
    }
  },
  computed: {
    srcList(){
      if(this.detail == null || this.detail == undefined){
        return [];
      }else{
        if(this.detail.images != null){
          var res = [];
          var strList = this.detail.images.split(",");
          for(let i = 0; i < strList.length; i++){
            res.push(strList[i]);
          }
          return res;
        }
        return [];
      }
    }
  }
}
</script>

<style scoped>
.userDetail{
  margin-left: 15%;
  width: 70.5%;
  z-index: 2;
}
.userDetailCard{
  position: relative;
  bottom: 50px;
  width: 100%;
  z-index: 3;
}
.topDetail{
  display: flex;
  width: 100%;
  border-bottom: 2px solid #cbcbcb;
}
.topItem{
  display: inline;
  text-align: center;
  margin: 5px 5px 5px 5px;
  width: 33%;
}
.bottonImgs{
  display: flex;
  margin: 5px 5px 5px 5px;
  flex-wrap: wrap;
}
.midDetail{
  margin:0px 5px 0px 5px;
}
.midDetail p{
  font-size: 13px;
}
</style>
